<template>
  <div>
    <NBreadcrumb class="mb-3">
      <NBreadcrumbItem>
        <NuxtLink to="/">首页</NuxtLink>
      </NBreadcrumbItem>
      <NBreadcrumbItem to="">
        <NuxtLink to="/bbs/0/1">社区列表</NuxtLink>
      </NBreadcrumbItem>
      <NBreadcrumbItem>
        {{ title }}
      </NBreadcrumbItem>
    </NBreadcrumb>

    <NGrid :x-gap="20">
      <NGridItem :span="18">
        <section class="bg-white rounded mb-5">
          <LoadingGroup :error="error" :pending="pending">
            <div class="flex p-5 pb-0">
              <n-avatar :size="40" :src="data.user.avatar"/>
              <div class="ml-2 flex-1">
                <h4>{{ data.user.name }}</h4>
                <small class="text-gray-500">发布时间： {{ data.created_time }}</small>
              </div>

              <n-tag v-if="Number(data.is_top) === 1" :bordered="false" size="small" type="success">置顶</n-tag>
            </div>

            <n-divider/>
          </LoadingGroup>

          <n-divider/>

          <div class="p-5 pt-0">
            <div v-for="(item,index) in data.content" :key="index">
              <p class="mb-3">{{ item.text }}</p>

              <div class="flex flex-col items-center">
                <n-image-group>
                  <n-image v-for="(img,imgI) in item.images" :key="imgI" :src="img" class="mb-3 rounded shadow"
                           object-fit="cover"/>
                </n-image-group>
              </div>
            </div>
          </div>


          <div class="flex justify-center">
            <n-button
                :loading="supportLoading"
                :type="data.issupport ? 'primary' : 'tertiary'"
                class="mr-3"
                secondary
                size="tiny"
                strong
                @click.stop="handleSupport(data)"
            >
              <template #icon>
                <n-icon>
                  <ThumbsUpSharp/>
                </n-icon>
              </template>
              点赞 {{ data.support_count }}
            </n-button>
          </div>

          <!--          -->
          <CommentInput :post_id="id" @success="handleCommentSuccess"/>

          <!-- 评论 -->
          <Comment ref="CommentRef" :post_id="id"/>
        </section>
      </NGridItem>
      <NGridItem :span="6">
        <NuxtLink to="/post/add">
          <n-button class="mb-5 w-full" type="primary">发布帖子</n-button>
        </NuxtLink>

        <HotCourseList/>
      </NGridItem>
    </NGrid>
  </div>
</template>
<script setup>
import {
  NAvatar,
  NBreadcrumb,
  NBreadcrumbItem,
  NButton,
  NDivider,
  NGrid,
  NGridItem,
  NIcon,
  NImage,
  NImageGroup,
  NTag
} from "naive-ui";

// 引入图标
import {ThumbsUpSharp} from "@vicons/ionicons5";


const route = useRoute();

const id = route.params.id;

const {error, data, pending} = await useReadPostApi(id)


const title = computed(() => {
  if (pending.value) {
    return "帖子详情"
  }

  let t = data.value?.desc?.text;
  if (t && t.length >= 10) {
    t = t.slice(0, 10) + "..."
  }
  return t
})

useHead({title})

const {supportLoading, handleSupport} = useHandleSupportPost();

// 评论成功
const CommentRef = ref(null);
const handleCommentSuccess = () => {
  CommentRef.value.handlePageChange(1)
}
</script>
